<template>
	<view class="all">
	       <view  class="wrap" >
	       		<u-swiper class="swiper" :list="play" name="playphoto" mode="none" border-radius="30" :img-mode="aspectFit" :effect3d="true" @click="click()"></u-swiper>
	       	</view>
			<view class="body">
				<view >
					<button  type="default"size="mini" style="background-color:#e3e3e3;list-style: none; border:0px ;font-size: large;font-weight: 800;margin-top: 20upx;height: 100%;float: left;color: #101010;" plain="true">文章</button>
					<navigator  url="./upload" open-type="navigate">
						<button type="default"size="mini" style="background-color:#e3e3e3;list-style: none; border:0px ;font-size: large;font-weight: 700;float: left;margin-top: 20upx;padding: 0;color: #555555;" plain="true">投稿</button>
					</navigator>
				</view>
				<view class="one">
					
				</view>
				
				<view @tap="getIamgeUrl(item.texturl)" v-for="(item,index) in text" class="main">
					<text style="font-weight: 700;display: inline-block;margin-bottom: 20upx;">{{item.title}}</text></br></br>
					<text style="font-size:30upx;">{{item.text}}</text>
					<view class="img-radus">
						<image bindtap="detail" :src="getArticleImage(item.photourl)" class="articleImage" style="height: 200upx;overflow：hidden;border-radius: 15upx;" mode="aspectFit"></image>
					</view>
				</view>
				
			</view>
	    </view>
</template>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	import http from '../../utils/http.js';
	 import Vue from "vue";
export default {
		data() {
			return {
				play:[],
				text:[],
				list:[]
			}
		},
		onPullDownRefresh() {
		        //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		        console.log('refresh');
		        setTimeout(function () {
		            uni.stopPullDownRefresh();  //停止下拉刷新动画
		        }, 1000);
		    },
		mounted:function(){
		http.getPhotoList().then(list=>{
						console.log(list)
						this.play = list.data;
						for(var i = 0 ; i<this.play.length; i++){
							this.play[i].playphoto = "https://www.camwork.site/rescourse/"+this.play[i].playphoto;
						}
						console.log(this.list);
						//此处的list就是config.js中，wx.request封装中resolve的值，
		                //即list===res.data.data的值；
					})
		http.getArticleList().then(list=>{
			console.log(list)
			this.text = list.data;
		})			
					// 如果需要向服务器传值，可以这样写
						// http.getArticleList({
						// 	open:"value"
						// }).then(list=>{
						// 	console.log(list)
						// })

		},
		methods: {
		getImage:function(Imageurl){
			return "https://www.camwork.site/rescourse/"+Imageurl;
		},
		getArticleImage:function(textImageurl){
			return "https://www.camwork.site/rescourse/article/"+textImageurl;
		},
		getIamgeUrl:function(playurl){
			uni.navigateTo({
			                  url: './article?url='+playurl
			                });
		},
		click:function(index){
			console.log(index);
			var that = this;
			uni.navigateTo({
			                  url: './article?url='+that.play[index].playurl
			                });
		}
	},
	}
</script>

<style>
		
	.all{
		background-color: #333333;
	}
.swiper{
	height: 350upx;
	margin: 20upx;
	margin-top: 0;
}

// swiper-item 里面的图片高度
swiper-item image{

	width: 100%;
	height: 100%;
}
.body{
	width: 100%;
	height: 100%;
	 border-radius: 25upx 25upx 0 0;
	background-color: #e3e3e3;
}
.main{
	background-color: #fff;
	margin: 15upx;
	margin-top: 25upx;
	border-radius: 15upx;
	padding: 20upx;
	padding-top: 25upx;
	   -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
	-webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);
	            
	box-shadow:4px 4px 12px 
	            -2px
	             rgba(20%,20%,40%,0.5);
	          
}
image{
	width: 100%;

}
.img-radus{
	-moz-border-radius:20px;
	-webkit-border-radius: 15px;
	border-radius:15px;
	}
.one{
	clear: both;
}
.articleImage{
	margin-top: 20upx;
	margin-bottom: 0upx;
	
}
</style>
